<!DOCTYPE html>
<style>
body {
  margin: 0;
}

#indicator {
    position: absolute;
    top: 200px;
    width: 100px;
    height: 100px;
    background-color: red;
}

#block {
    position: relative;
    width: 100px;
    height: 100px;
    top: 100px;
    background-color: green;
}

#composited-non-stacking-context {
    width: 20px;
    height: 20px;
    background-color: white;
    backface-visibility: hidden;
}
</style>
<div id="indicator">The test fails if you see this.</div>
<div id="composited-non-stacking-context">
    <div id="block">The test passes if there is no red.</div>
</div>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
    document.getElementById("block").style.top = "200px";
}, true);
</script>
